<template>
    <div class="info-header">
        <div class="title flex">
            <div class="name">微信昵称</div>
            <div class="from ml12">
                @微信
                <a-tooltip>
                    <template #title>修改备注</template>
                    <EditOutlined @click="handleEdit" />
                </a-tooltip>
            </div>
        </div>
        <a-button type="link" @click="handleClick">
            查看更多聊天信息
            <RightOutlined />
        </a-button>
    </div>

    <EditModal ref="editRef" />
</template>

<script setup lang="ts">
import {ref} from "vue";
import {RightOutlined, EditOutlined} from "@ant-design/icons-vue";
import EditModal from "./EditName.vue";
import {useRouter} from "vue-router";
import {navPath} from "@/router/config";
const nav = useRouter();
const editRef = ref<InstanceType<typeof EditModal>>();
// 编辑当前备注
const handleEdit = () => {
    editRef.value.show();
};

const handleClick = () => {
    nav.push({path: navPath.weChatHistory});
};
</script>

<style scoped lang="less">
.info-header {
    height: 48px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    .title {
        .name {
            color: #000;
        }
        .from {
            font-size: 12px;
            color: #19af19;
        }
    }
}
</style>
